<template>
  <div class="outmain ba_f">
    <div class="shuju_title mar_b20">
      <div class="shuju_title_text">
        <span>交班记录</span>
      </div>
    </div>
    <el-form :inline="true" :model="formData">
      <el-form-item label="交班时间" label-width="100px">
        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="收银员">
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="tabledata mar_t20">
      <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe style="width: 100%">
        <el-table-column prop="sort" label="收银员"></el-table-column>
        <el-table-column prop="trueName" label="上班时间"></el-table-column>
        <el-table-column prop="userName" label="交班时间"></el-table-column>
        <el-table-column prop="role_name" label="收款金额"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      <ggedit ref="ggedit" @fetchData="fetchData"></ggedit>
    </div>
  </div>
</template>
<script>
import Ggedit from '../../setting/components/manageredit';
import { getUserList, userDel, changeUser } from '@/api/setup';
import index from '@/api/index';

export default {
  components: { Ggedit },
  created() {
    this.fetchData();
    this.init();
  },
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      formData: {},
      list: [],
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      path: ''
    };
  },
  methods: {
    init() {
      const publishUrl = 'https://bkycms.com/addons/yb_wm/views/channel/index/index.html#/login';
      const backendPath = index.isDev ? publishUrl : location.href.match(/(\S*)views/)[1] + 'views/channel/index/index.html#/login';
      this.path = backendPath;
    },
    async fetchData() {
      this.listLoading = true;
      let params = {
        page: this.page.currentPage
      };
      const { data, count } = await getUserList(params);
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    handleEdit(id) {
      this.$router.push({
        path: '/shiftHandoverInfo'
      });
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    async changeSwitch(row) {
      const { msg } = await changeUser({ id: row.id, display: row.display });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await userDel({ id: row.id });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await userDel({ id });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    chickLogin() {
      let routeData = this.$router.resolve({ path: '/login', query: {} });
      window.open(routeData.href, '_blank');
    }
  }
};
</script>